<template>
    <div id="monitor">
        <div class="cashier" v-for="(cashier,index1) in cashierList">
            <div class="title">
                {{$t('收银员')}}:{{ cashier.account }}
            </div>

            <div class="table">
                <table class="matable" style="user-select: none;">
                    <tr>
                        <td>{{ $t('行数') }}</td>
                        <td>{{ $t('商品名称') }}</td>
                        <td>{{ $t('数量') }}</td>
                        <td>{{ $t('价格') }}</td>
                        <td>{{ $t('税费') }}</td>
                        <td>{{ $t('总计') }}</td>
                    </tr>

                    <tr v-for="(item,index2) in cashier.cartList" v-bind:key="item.id" :class="{'needDelete':item.needDelete,'needDeleteAll':item.needDeleteAll}" @click="doDelete(item,index1,index2)">
                        <td>{{ index2 }}</td>
                        <td>{{ item.name}}</td>
                        <td>{{ item.number }}</td>
                        <td>{{ item.price }}</td>
                        <td>{{ item.tax }}</td>
                        <td>{{ ((item.price+item.tax)*item.number).toFixed(2) }}</td>
                    </tr>
                </table>
            </div>


            <div class="bottom">
                <div>
                    <span class="text">{{ $t('商品') }}:</span>
                    <span class="price">{{ cashier.sumPrice }}</span>
                    <span class="text">{{ $t('税费') }}:</span>
                    <span class="price">{{ cashier.sumTax }}</span>
                    <span class="text">{{ $t('总计') }}:</span>
                    <span class="price">{{ cashier.total }}</span>
                </div>

                <div>
                    <span class="text">{{ $t('现金') }}:</span>
                    <span class="price">{{ cashier.cash }}</span>
                    <span class="text">{{ $t('找零') }}:</span>
                    <span class="price">{{ (cashier.cash - cashier.total).toFixed(2) }}</span>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "monitor",
    data(){
        return {
            cashierList:[{
                account:"A001",
                cartList:[ { "number": 1, "code": "1", "name": "测试商品名称", "price": 83.34, "tax": 5.27,"needDelete":true }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 41.78, "tax": 4.08 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 38.14, "tax": 6.57 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 71.84, "tax": 4.46 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 35.69, "tax": 8.78 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 43.61, "tax": 2.72 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 53.46, "tax": 4.69 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 47.41, "tax": 8.43 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 67.02, "tax": 2.93 },{ "number": 1, "code": "1", "name": "测试商品名称", "price": 83.34, "tax": 5.27 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 41.78, "tax": 4.08 } ],
                sumPrice:250,
                sumTax:250,
                total:500,
                cash:500
            },{
                account:"A002",
                cartList:[ { "number": 1, "code": "1", "name": "测试商品名称", "price": 83.34, "tax": 5.27 }],
                sumPrice:250,
                sumTax:250,
                total:500,
                cash:500
            },{
                account:"A003",
                cartList:[ { "number": 1, "code": "1", "name": "测试商品名称", "price": 83.34, "tax": 5.27,"needDeleteAll":true },{ "number": 1, "code": "1", "name": "测试商品名称", "price": 83.34, "tax": 5.27,"needDeleteAll":true },{ "number": 1, "code": "1", "name": "测试商品名称", "price": 83.34, "tax": 5.27,"needDeleteAll":true },{ "number": 1, "code": "1", "name": "测试商品名称", "price": 83.34, "tax": 5.27,"needDeleteAll":true }  ],
                sumPrice:250,
                sumTax:250,
                total:500,
                cash:500
            },{
                account:"A004",
                cartList:[ { "number": 1, "code": "1", "name": "测试商品名称", "price": 83.34, "tax": 5.27 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 41.78, "tax": 4.08 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 38.14, "tax": 6.57 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 71.84, "tax": 4.46 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 35.69, "tax": 8.78 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 43.61, "tax": 2.72 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 53.46, "tax": 4.69 }, { "number": 1, "code": "1", "name": "测试商品名称", "price": 47.41, "tax": 8.43 } ],
                sumPrice:250,
                sumTax:250,
                total:500,
                cash:500
            }]
        }
    },
    methods:{
        doDelete(item,index1,index2){
            if (!item.needDelete && !item.needDeleteAll){
                return;
            }
            this.$prompt( this.$t('请输入店长密码帮助店员删除'), this.$t('提示'),
                {
                    type:"warning",            // 图标样式 "warning"|"error"...
                    inputValue: '',
                    inputErrorMessage: this.$t('输入不能为空'),
                    inputValidator: (value) => {       // 点击按钮时，对文本框里面的值进行验证
                        if(!value) {
                            return this.$t('输入不能为空');
                        }
                    }
                }).then(({value}) => {
                    if (value != "111111"){
                        this.$alert(this.$t('密码错误'),this.$t('提示'),{
                            type:"error"
                        });
                    }else{
                        if (item.needDeleteAll){
                            this.cashierList[index1].cartList = [];
                        }else if (item.needDelete){
                            this.cashierList[index1].cartList.splice(index2,1);
                        }
                        this.$alert(this.$t('操作成功'),this.$t('提示'),{
                            type:"success"
                        });
                    }

                // TO DO DO ...
            }).catch((err) => {
                console.log(err);
            });
        },
        changeLang(value){
            localStorage.language = value;
            this.$i18n.locale = value;
        }
    },
    mounted() {
        this.language = localStorage.language;

    }
}
</script>

<style scoped lang="scss">
    #monitor{
        height: 100%;padding: 5px; background: #f3f3f3;
        overflow: hidden; font-size: 10px;
        .cashier{
            width: calc( 50% - 10px ); height: calc( 50% - 10px ); margin: 5px; background: #FFFFFF; box-shadow: 1px 1px 3px 1px #bcbcbc; float: left;
            position: relative;
            .title{
                position: absolute;
                top: 0;left: 0; color: #2b86c5; height: 30px;line-height: 30px;padding: 0 10px;
                border-bottom: 1px solid #cccccc; width: 100%;font-size: 15px;
            }

            .table{
                margin-top: 30px;margin-bottom: 30px; max-height: calc( 100% - 60px );
                overflow: auto;
                .needDelete{
                    background: red; cursor: url("../../assets/delete.png"),pointer;
                }
                .needDeleteAll{
                    background: #b60000; cursor: url("../../assets/delete.png"),pointer;
                }
                td{
                    padding: 5px;
                }
            }

            .bottom{
                display: flex; justify-content: space-between;
                position: absolute;
                bottom: 0; border-top: 1px solid #cccccc;
                padding:0 20px ;background: #FFF; width: 100%;
                height: 30px;line-height: 30px;

                .text{

                }
                .price{
                    margin-right: 20px;color: orangered;
                }
            }
        }


    }
</style>
